<template>
    <div class="pb_a">
        <van-nav-bar class="head_nb" left-text="返回" left-arrow @click-left="$router.back();"/>

        <div class="pt_a ta_c txt_60">
            欢迎登录软考网
        </div>

        <van-cell-group>
            <van-field
                v-model="account"
                clearable
                label="账号"
                placeholder="请输入账号"
                required/>
            <van-field
                v-model="password"
                clearable
                type="password"
                label="密码"
                placeholder="请输入密码"
                required/>
            <van-row type="flex" v-if="captchaOpen">
                <van-col span="18">
                    <van-field
                        v-model="captcha"
                        center
                        clearable
                        label="验证码"
                        placeholder="请输入验证码"
                        required>
                    </van-field>
                </van-col>
                <van-col span="6">
                    <van-image width="6rem" height="2.75rem" :src="imgUrl" @click="getCaptcha"/>
                </van-col>
            </van-row>
        </van-cell-group>

        <div class="m_20">
            <van-button @click="login" type="primary" size="small" class="btn_100">登录</van-button>
        </div>
    </div>
</template>
<script>
    import Vue from 'vue';
    import common from '../../common/common';
    import {getLogin, reqLogin} from '../../api';
    import {CellGroup, Col, Field, Image, NavBar, Row} from 'vant';

    Vue.use(Row).use(Col);
    Vue.use(Image);
    Vue.use(NavBar).use(Field).use(CellGroup);

    export default {
        name: "Login",
        data() {
            return {
                account: '',
                password: '',
                captcha: '',
                uuid: '',
                imgUrl: '',
                captchaOpen: false
            }
        },
        async created() {
            //异步获取登录的信息
            const result = await getLogin();
            if (result.code === 0) {
                const {uuid, captchaOpen} = result;
                this.uuid = uuid;
                this.captchaOpen = captchaOpen;
                if (captchaOpen) {
                    this.getCaptcha();
                }
            }
        },
        methods: {
            async login() {
                let result;
                //表单校验
                const {account, password, captcha, uuid} = this;
                if (account == '') {
                    common.toast('fail', '账号不能为空！');
                    return;
                }
                if (password == '') {
                    common.toast('fail', '密码不能为空！');
                    return;
                }
                if (captcha == '') {
                    common.toast('fail', '验证码不能为空！');
                    return;
                }
                //发起请求
                result = await reqLogin({account, password, captcha, uuid});
                //结果处理
                if (result.code === 0) {
                    common.toast('success', result.msg, () => {
                        const user = result.user;
                        localStorage.setItem("token", result.token);
                        // 将user保存到vuex的state
                        this.$store.dispatch('setUser', user);
                        // 去我的界面
                        this.$router.replace('/user');
                    });
                } else {
                    //显示警告提示
                    common.toast('fail', result.msg, () => {
                        //显示新的图片验证码
                        this.getCaptcha();
                    });
                }
            },
            getCaptcha() {
                //获取一个新的图片验证码
                this.imgUrl = 'api/captcha?uuid=' + this.uuid + '&time=' + Date.now();
            }
        }
    }
</script>

<style scoped>

</style>
